<script setup lang="ts">
import { EChartsOption } from 'echarts';
import echarts from '../../plugin/echart';
import { onMounted } from 'vue';
import { Dayjs } from "dayjs"
import { ref } from "vue"
import * as dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');



// 用户消费列表

import ShopList from "./components/ShopList.vue"

import Alertnote from "./components/Alternote.vue"


import Task from "./task.vue"


const calendarData = ref<Dayjs>();

// const getListData = (calendarData: Dayjs) => {
//     let listData;
//     switch (calendarData.date()) {
//         case 8:
//             listData = [
//                 { type: 'warning', content: 'This is warning event.' },
//                 { type: 'success', content: 'This is usual event.' },
//             ];
//             break;
//         case 10:
//             listData = [
//                 { type: 'warning', content: 'This is warning event.' },
//                 { type: 'success', content: 'This is usual event.' },
//                 { type: 'error', content: 'This is error event.' },
//             ];
//             break;
//         case 15:
//             listData = [
//                 { type: 'warning', content: 'This is warning event' },
//                 { type: 'success', content: 'This is very long usual event。。....' },
//                 { type: 'error', content: 'This is error event 1.' },
//                 { type: 'error', content: 'This is error event 2.' },
//                 { type: 'error', content: 'This is error event 3.' },
//                 { type: 'error', content: 'This is error event 4.' },
//             ];
//             break;
//         default:
//     }
//     return listData || []
// }

// const getMonthData = (calendarData: Dayjs) => {
//     if (calendarData.month() === 8) {
//         return 1394;
//     }
// };

const onPanelChange = (value: Dayjs, mode: string) => {
    console.log(value, mode);
};
const onSelect = (value: Dayjs, mode: string) => {
    console.log(value, mode);
};
const onMouseEnter = (mouseE: any) => {

    console.dir(mouseE.target.id)
};

onMounted(() => {
    const piedom = document.getElementById('PieChart');
    const bardom = document.getElementById('BarChart');
    const PieChart = echarts.init(piedom); // 初始化echarts实例
    const BarChart = echarts.init(bardom); // 初始化echarts实例

    let PieOption: EChartsOption
    let BarOption: EChartsOption

    window.addEventListener("resize", function () {
        PieChart.resize()
        BarChart.resize()
    }, false)


    PieOption = {
        title: {
            text: '产品销售排行',
            subtext: '前五名',
            left: 'center',
            top: 50,
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            show: false,
        },
        series: [
            {
                name: '售出',
                type: 'pie',
                radius: '50%',
                top: 90,
                data: [
                    { value: 1048, name: '妆前乳' },
                    { value: 735, name: '修复霜' },
                    { value: 580, name: '粉底液' },
                    { value: 484, name: '眉笔' },
                    { value: 300, name: '保湿水' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    BarOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['销售量', '销售额']
        },
        xAxis: [
            {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '销售量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} 件'
                }
            },
            {
                type: 'value',
                name: '销售额',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} ￥'
                }
            }
        ],
        series: [
            {
                name: '销售量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number) + ' 件';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ]
            },
            {
                name: '销售额',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number) + ' ￥';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };



    // 设置实例参数
    PieChart.setOption(PieOption);
    BarChart.setOption(BarOption);
});
</script>

<template>
    <div class="card_list">
        <div class="common_box_style">
            <div class="sale_char" id="PieChart" ref="charts"></div>
            <hr>
            <div class="shop_list">
                <ShopList></ShopList>
            </div>
        </div>
        <div class="common_bigbox_style">
            <div class="common_box_style">
                <div class="line_pic_style" id="BarChart"></div>
            </div>
            <div class="common_box_style">
                <div class="import_notice_sytle">
                    <Alertnote></Alertnote>
                </div>
            </div>
        </div>
        <!-- <div class="common_box_style date_item_style"> -->
        <div class="common_bigbox_style">
            <div class="common_box_style">
                <div class="date_style" @mousemove="onMouseEnter">
                    <a-calendar v-model:value="calendarData" :fullscreen="false" @panelChange="onPanelChange"
                        @select="onSelect" />
                </div>
            </div>
            <div class="common_box_style">
                <div class="day_pen_style">
                    <Task></Task>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.card_list {
    height: 90vh;
    position: relative;
    display: flex;
    // flex-wrap: wrap;

    .sale_char {
        width: 350px;
        height: 44vh;
    }

    .shop_list {
        width: 100%;
        height: 42vh;
        padding: 10px;
    }

    .line_pic_style {
        width: 40vw;
        height: 44vh;
        padding-top: 30px;
    }

    .import_notice_sytle {
        // width: 20vw;
        flex: 1;
        height: 44vh;
        padding: 10px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .day_pen_style {
        // width: 19vw;
        flex: 1;
        height: 44vh;

    }

    .date_style {
        // width: 22vw;
        flex: 1;
        height: 44vh;
        overflow: hidden;
        border-radius: 10%;
    }

    // .date_item_style {
    //     margin-left: 20px;
    // }
}

.common_bigbox_style {
    display: flex;
    flex-direction: column;
    width: max-content;
    height: 100%;
    // margin: 10px;
    margin-left: 18px;
    // align-items: center;
    justify-content: space-between;
    // background-color: #000;

}

// 写一个公用的样式，公用的盒子样式
.common_box_style {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1),
        0 -8px 20px rgba(0, 0, 0, 0.1);
}

// 日历控件
.events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.events .ant-badge-status {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 12px;
}

.notes-month {
    text-align: center;
    font-size: 28px;
}

.notes-month section {
    font-size: 28px;
}
</style>



